<template>
	<view style="background-color: #eee; height:154vh;" v-if="video">
		<u-tabs v-if="video.videoTeacherId && video.videoPcId" :list="tabs" :current="current" :is-scroll="false"
			@change="changeTab"></u-tabs>
		<view class="video">
			<video id="video" style="width:750rpx;height:500rpx;" :poster="video.cover" :title="video.name"
				@play="onVideoPlay" @timeupdate="timeUpdate" :show-fullscreen-btn="true" :autoplay="false"
				@fullscreenchange="fullscreenchange" :controls="true" :src="videoUrl">
				<cover-view :style="'top:' + (windowWidth - 30) + 'px;width:' + windowHeight + 'px'"
					style="position: absolute;left: 0;width:720rpx;height:50rpx;border:solid;text-align: center;"><text
						style="text-align: center;color:#fff;">{{ caption }}</text></cover-view>
			</video>
		</view>
		<view class="video-info">
			<view class="video-name"><text>{{ video.videoTitle }}</text></view>
			<view class="knowledge-point-list">
				<image src="/static/version_4/Slice19.png"></image>
				<!-- 将uni-tag替换为普通div元素 -->
				<u-tag style="margin-right: 12rpx; border-radius: 12rpx;" mode="light" type="primary"
					v-for="(point, index) in knowledgePoints" :key="index" :text="point" />
			</view>
			<view class="video-action">
				<view class="btn-action">
					<image src="/static/version_4/Slice20.png"></image><text>收藏</text>
				</view>
				<view class="btn-action">
					<image src="/static/version_4/Slice22.png"></image><text>分享</text>
				</view>
			</view>
		</view>

		<view class="teacher-introduce">
			<view class="teacher">
				<view class="teacher-name" @click="toTeacherDetail">
					<u-avatar src="/static/avatar1.png"></u-avatar>
					<text class="teacher-name-text">{{ video.teacherName }}</text>
					<!-- 将uni-tag替换为普通div元素 -->
				</view>
				<!-- <uni-icons type="forward" size="20"></uni-icons> -->
				<view class="teacher-collect">
					<u-button type="primary" size="mini" shape="circle">收藏</u-button>
				</view>
			</view>
			<view class="teacher-name-introduce">
				<textarea style="height: 60rpx;" :disabled="true" class="value" :value="video.teacherDescription"
					placeholder="该教师未公布个人简介"></textarea>
			</view>

		</view>

		<!-- 评论和推荐组件 -->
		<view class="commonAndRecommend">
			<u-tabs :list="commonTabs" :current="commonCurrent" :is-scroll="false" @change="changeCommonTab"></u-tabs>
			<view class="recommend" v-if="commonCurrent === 0">
				<Recommend />
			</view>
			<view class="common" v-if="commonCurrent === 1">
				<Common />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import uniReq from '@/api/uniReq'
import { onLoad } from '@dcloudio/uni-app'
import Common from './components/common.vue'
import Recommend from './components/recommend.vue'

// 视频数据
const video = ref<any>(null)
const windowHeight = ref(0)
const windowWidth = ref(0)
const current = ref(0)
const caption = ref('')
const knowledgePoints = ref([]) // 可以从接口获取

// 评论和推荐组件的当前标签页
const commonCurrent = ref<number>(0)
const changeCommonTab = (index: number) => {
	commonCurrent.value = index
}
const commonTabs = [
	{
		name: '推荐',
	},
	{
		name: '评论'
	},
]


const videoUrl = ref('')

const rowData = ref<any>({})// 传进来的完整对象

// 教师类型映射
const teacherType = {
	1: '特级教师',
	2: '高级教师',
	3: '一级教师',
	4: '二级教师'
}

// 标签页配置
const tabs = [
	{
		title: '详情',
		name: '电脑画面'
	},
	{
		title: '笔记',
		name: '教师画面'
	}
]

const getVideoNotes = async () => {
	try {
		// 获取页面参数
		const contentId = rowData.value.videoContentId || ''
		if (!contentId) {
			uni.showToast({
				title: '详情ID不存在',
				icon: 'none'
			})
			return
		}
		// 请求视频详情数据
		const res: any = await uniReq({
			url: '/video-content/app-find-video-address',
			method: 'post',
			data: {
				videoContentId: contentId,
				userId: uni.getStorageSync('userInfo')?.userId || '',
				userType: uni.getStorageSync('userInfo')?.userType || ''
			}
		})
		if (res.status === 200 && res.data) {
			video.value = res.data
			knowledgePoints.value = res.data.findByVideoIdVOLists.map((item: any) => item.videoKnowledgePointName) || []
			if (current.value === 0) {
				videoUrl.value = res.data.videoPcUrl
			} else if (current.value === 1) {
				videoUrl.value = res.data.videoTeacherUrl
			}
			// 如果接口返回知识点，更新知识点列表
			// if (res.data.knowledgePoints && Array.isArray(res.data.knowledgePoints)) {
			// 	knowledgePoints.value = res.data.knowledgePoints
			// }
		} else {
			uni.showToast({
				title: res.message || '获取视频详情失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('获取视频详情失败:', error)
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'none'
		})
	}
}

// 视频播放事件
const onVideoPlay = () => {
	console.log('视频开始播放')
}

// 视频时间更新
const timeUpdate = (e: any) => {
	const currentTime = e.detail.currentTime
	// 这里可以根据视频时间更新字幕或其他逻辑
}

// 全屏变化事件
const fullscreenchange = (e: any) => {
	const { fullScreen } = e.detail
	console.log('全屏状态:', fullScreen)
}

// 切换标签页
const changeTab = (index: number) => {
	current.value = index
	console.log('切换到标签页:', tabs[index].title)
	getVideoNotes()
}

// 跳转到教师详情
const toTeacherDetail = () => {
	if (video.value && video.value.teacherId) {
		uni.navigateTo({
			url: `/pages/teacher/teacherDetail?id=${video.value.teacherId}`
		})
	}
}

// 获取屏幕尺寸
const getWindowSize = () => {
	try {
		const { windowHeight: h, windowWidth: w } = uni.getSystemInfoSync()
		windowHeight.value = h
		windowWidth.value = w
	} catch (error) {
		console.error('获取屏幕尺寸失败:', error)
	}
}

// 生命周期钩子
onMounted(() => {
	getWindowSize()
	getVideoNotes()
})


onLoad((option: any) => {
	const item = JSON.parse(decodeURIComponent(option.data))
	rowData.value = item
	console.log('完整对象', item)
	// 直接用 item.videoPcId / item.videoContentId
})

// 页面卸载时清理
onUnmounted(() => {
	// 清理视频资源，防止内存泄漏
	const videoContext = uni.createVideoContext('video')
	if (videoContext) {
		videoContext.pause()
	}
})
</script>

<style lang="scss" scoped>
.video {
	position: relative;
}

.label {
	font-size: 13px;
	color: #696969;
}

.value {
	font-size: 15px;
}

.teacher-introduce {
	margin: 30rpx;
	display: flex;
	flex-direction: column;
	padding: 15rpx;
	border-radius: 15rpx;
	background-color: #fff;
}

.teacher {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.teacher-name-introduce {
	margin-top: 15rpx;
}

.teacher-name {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.teacher-collect {
	margin-top: 20rpx;
	width: 200rpx;
	height: 80rpx;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-end;
}

.teacher-name-image {
	width: 80rpx;
	height: 80rpx;
	border-radius: 60rpx;
}

.teacher-name-text {
	margin-left: 30rpx;
	font-weight: bold;
	margin-right: 15rpx;
}

.status_bar {
	height: 145rpx;
	width: 750rpx;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

.navigate-back {
	width: 100rpx;
	margin-bottom: 15rpx;
	padding-left: 15rpx;
}

.view-tab {
	margin-bottom: 15rpx;
	margin-left: 30rpx;
}

.video-info {
	margin: 30rpx;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	border-radius: 15rpx;
	justify-content: space-around;

	.video-name {
		text {
			font-weight: bold;
		}
	}

	.knowledge-point-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

		image {
			width: 160rpx;
			height: 80rpx;
		}

		// 新增知识点标签样式，替代uni-tag
		.knowledge-tag {
			margin-left: 15rpx;
			background-color: #2189ff;
			color: white;
			padding: 6rpx 16rpx;
			border-radius: 16rpx;
			font-size: 26rpx;
			display: inline-block;
		}
	}

	.video-action {
		display: flex;
		flex-direction: row;

		.btn-action {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 5rpx 15rpx;
			margin-right: 15rpx;
			background-color: #eee;

			image {
				width: 25rpx;
				height: 25rpx;
			}

			text {
				font-size: 14px;
				color: gray;
			}
		}
	}
}

// 教师类型标签样式，替代uni-tag
.teacher-type-tag {
	background-color: #2189ff;
	color: white;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	font-size: 24rpx;
	display: inline-block;
}


.commonAndRecommend {
	margin: 30rpx;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	border-radius: 15rpx;
	height: calc(100vh - 230rpx);
}
</style>